<template>
	<view class="flex-col page">
		<view class="flex-col flex-1 group_2">
			<view class="flex-col list">
				<view class="flex-row list-item" v-for="(item, index) in list" :key="index" @click="toDetail(item.id)">
					<view class="flex-col flex-1 self-start">
						<text class="font">{{item.name}}</text>
						<view class="mt-10 flex-row items-center group_3">
							<image class="image_6"
								src="https://shops.cg500.com/static/aijiu/clock-icon.png" />
							<text class="font_2 ml-5-5">{{item.create_at}}</text>
						</view>
					</view>
					<image class="ml-20 shrink-0 self-center image_5"
						:src="item.cover" />
				</view>
			</view>
			<view class="shrink-0 section_3"></view>
			<view class="shrink-0 relative divider view"></view>
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData;
	export default {
		data() {
			return {
				list: [],
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/shop/commonSenseDetail/index?id=' + id
				})
			},
			getList() {
				var _this = this;
				uni.request({
					url: app.post_url + '/aijiu/api.Article/knowledge',
					header: {
						'content-type': 'application/json'
					},
					method: 'post',
					success(res) {
						if (res.data.code == 1) {
							_this.list = res.data.data
						}
					},
					fail(res) {
						uni.showToast({
							title: res.data.info,
							icon: 'none'
						})

					}
				})
			}
		}
	}
</script>

<style>
	@import "@/common/css/common.css";

	.ml-5-5 {
		margin-left: 11rpx;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_2 {
		overflow-y: auto;
	}

	.list {
		padding-top: 18rpx;
	}

	.list-item {
		padding: 23rpx 30rpx;
		background-color: #ffffff;
	}

	.font {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 48rpx;
		color: #151515;
		overflow: hidden;
		/* white-space: nowrap; */
		text-overflow: ellipsis;
		display: -webkit-box;
		/* 使用WebKit的flexbox布局 */
		-webkit-line-clamp: 2;
		/* 限制显示的行数 */
		-webkit-box-orient: vertical;
		/* 垂直方向上的flexbox布局 */
		word-break: break-all;
		/* 防止单词内换行 */
	}

	.group_3 {
		padding: 0 3rpx;
	}

	.image_6 {
		width: 24rpx;
		height: 24rpx;
	}

	.font_2 {
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 17rpx;
		color: #979797;
	}

	.image_5 {
		border-radius: 16rpx;
		width: 204rpx;
		height: 153rpx;
	}

	.divider {
		margin: 0 30rpx;
		background-color: #e8e8e8;
		height: 1rpx;
	}

	.section_3 {
		background-color: #f5f5f5;
		height: 218rpx;
	}

	.view {
		margin: -218rpx 30rpx 0;
	}
</style>